// 第一种：使用实验性的属性初始化器语法
// class LoggingButton extends React.Component {
//     // This syntax ensures `this` is bound within handleClick.
//     // Warning: this is *experimental* syntax.
//     handleClick = () => {
//         console.log('this is:', this);
//     }

//     render() {
//         return (
//             <button onClick={this.handleClick}>
//         Click me
//       </button>
//         );
//     }
// }

// 第二种：回调函数中使用 箭头函数
class LoggingButton extends React.Component {
    handleClick() {
        console.log('this is:', this);
    }

    render() {
        // This syntax ensures `this` is bound within handleClick
        return (
            <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
        );
    }
}
ReactDOM.render(
    <LoggingButton />,
    document.getElementById('root')
)